<template>
  <div class="top">
    <div class="Page-left animate__animated animate__rubberBand">
      <img src="../../assets/image/bitbug_favicon.ico" alt="">
      <span class="logo">闪光时刻</span>
    </div>
    <div class="Page-content">
      <!--          <el-input placeholder="请输入你要搜索的内容" v-model="searchValue" class="inputValue">-->
      <!--            <template #append >-->
      <!--              <el-icon @click="goSearch"><Search /></el-icon>搜索-->
      <!--            </template>-->
      <!--          </el-input>-->
    </div>
    <div class="Page-right">
      <div class="pageright-help">
        <el-dropdown hide-on-click="false">
          <div>
            <el-icon style="font-size: 16px; margin-bottom: 2px;margin-right:20px ;color:  #fff;"
            >
              <CirclePlus
              />
            </el-icon>
            <p class="help">投稿</p></div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <span @click="PublishOrManage({type:'public'})">发布视频</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <span @click="PublishOrManage({type:'manage'})">作品管理</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <el-dropdown :hide-on-click="false">
        <el-avatar size="small" :src="useAlerts.UserInfo.user.avatar" v-if="useAlerts.UserInfo?.token"/>
        <div class="login" @click="goLogin" v-else>
          <el-icon>
            <User/>
          </el-icon>
          登录
        </div>
        <template #dropdown v-if="useAlerts.UserInfo?.token">
          <el-dropdown-menu>
            <el-dropdown-item>
              <div
                  style="width: 200px;height: 300px; display: flex;flex-direction: column;justify-content: space-around;align-items: center">
                <div style="display: flex;flex-direction: column;align-items: center;">
                  <el-form label-width="30px" >
                    <el-form-item label="头像">
                      <el-avatar :size="50" :src="useAlerts.UserInfo.user.avatar" v-if="isUpdate" />
                      <el-upload
                          v-else
                          :before-upload="beforeAvatarUpload"
                          :on-change="handleAvatarChange"
                          :show-file-list="false"
                          class="avatar-uploader"
                      ><el-avatar :size="50" :src="showImg" />
                        <!--                      <img v-if="avatarUrl" :src="avatarUrl" class="avatar"/>-->
                        <!--                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
                      </el-upload>
                    </el-form-item>
                    <el-form-item label="用户名">
                      <el-text class="mx-1" type="info" v-if="isUpdate" size="large">
                        {{ useAlerts.UserInfo.user.username }}
                      </el-text>
                      <el-input v-if="!isUpdate" placeholder="请输入用户名" style="width: 150px;height: 20px;"
                                v-model="userName"></el-input>
                    </el-form-item>
                    <el-form-item v-if="isUpdate" label="操作">
                      <el-button @click="isUpdate = false">修改</el-button>
                    </el-form-item>
                  <el-form-item  v-if="!isUpdate" label="操作">
                    <el-button type="primary" @click="updateNameConfim" size="small">
                      确定
                    </el-button>
                    <el-button @click="updateName" size="small">{{ isUpdate ? "修改名称" : "取消" }}</el-button>
                  </el-form-item>
                  </el-form>
                </div>
                <div>
                  <el-button @click="logout" v-if="isUpdate">退出登录</el-button>
                </div>
              </div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script setup lang='ts'>
import 'animate.css';
import {ref, reactive, computed} from 'vue'
import 'animate.css';
import {useAlertsStore} from '../../store/modules/home.js'
import {useRouter} from 'vue-router'
import {reqSearchList, reqUpdateName} from '../../api/home.js'
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import defaultImg from '@/assets/image/th.jpg'
const form = ref({})
let useAlerts = useAlertsStore()
let $router = useRouter()
// 头像
let circleUrl = ref()
// 搜索的内容
let searchValue = ref('')
let pageNumber = ref('0')
let pagesize = ref('1')
//
const showImg = ref(defaultImg)
const goLogin = () => {
  // useAlerts.checkDialog(true)
  useAlerts.checkDialog(true)
}
const handleAvatarChange = (file) => {
  // 创建一个Object URL并更新showImg
  showImg.value= URL.createObjectURL(file.raw);
  console.log(showImg.value,'showVal')
  // avatarFile.value = file.raw;
  // 这里可以添加上传文件到后端的逻辑
};
// 发布或管理视频
const PublishOrManage = (params) => {
  if (params.type == 'public') {
    $router.push('/publicVedio')
  } else {
    console.log(useAlerts.UserInfo?.token, '===')
    if (!useAlerts.UserInfo?.token) {
      ElMessage.warning('请先登录您的账号!')
      return
    } else {
      $router.push('/manageVedio')
    }
  }
}
const goSearch = async () => {
  let res = await reqSearchList(0, 1, searchValue.value)
}
const logout = () => {
  useAlerts.logoutLogin()
  ElMessage.success('登出成功')
}
const isUpdate = ref(true)
const userName = ref('')
const updateNameConfim = async () => {
  if (!userName.value.trim()) {
    ElMessage.warning('请输入要修改的名称')
    return
  }
  useAlerts.UserInfo.user.username = userName.value
  await reqUpdateName(useAlerts.UserInfo.user)
  userName.value = ''
  isUpdate.value = true
  ElMessage.success('修改成功')
}
const updateName = () => {
  if (isUpdate.value) {
    isUpdate.value = false
  } else {
    isUpdate.value = true
  }
}


const beforeAvatarUpload = (file) => {
  console.log(file,'file')
  const isImage = file.type.startsWith('image/');
  if (!isImage) {
    alert('请上传图片文件');
  }
  return isImage;
};
</script>

<style scoped lang="less">
.ulList li {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top {
  height: 40px;
  width: 100%;
  display: flex;
  justify-content: space-between;

  .Page-left {
    width: 200px;
    display: flex;
    align-items: center;

    justify-content: flex-start;
    margin-bottom: 10px;

    .logo {
      font-style: italic !important;
      font-size: 20px;
      font-weight: 800;
      padding-top: 15px;
      margin-left: 5px;
      color: #fff;
      text-shadow: 4px 8px 5px #000;
    }
  }

  .Page-content {
    flex: 1;
    display: flex;
    align-items: center;
  }

  .Page-right {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 400px;

    .login {
      width: 100px;
      height: 40px;
      display: flex;
      justify-content: center;
      color: #fff;
      align-items: center;
      background-color: #fe2c55;
      border-radius: 8px;
    }

    .pageright-help {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;

      .help {
        margin-right: 20px;
        border: 1px solid #ccc;
        font-size: 16px;
        color: #fff;
      }
    }
  }
}


.inputValue {
  height: 40px;
  margin-left: 200px;
  outline: none;
  border-radius: 5px;
  width: 450px;
}

:deep(.el-tabs__nav-scroll) {
  display: flex;
  justify-content: center;
}

:deep(.el-tabs__nav-wrap::after) {
  content: "";
  width: 0;
}

:deep(.el-input__wrapper) {
  background-color: transparent;
  outline: none;
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 0 transparent;
  border: 1px solid #dcdfe6;
  height: 40px;
}

.el-dropdown__popper .el-dropdown-menu {
  /* border: none; */
  background-color: aliceblue;
}

:deep(.el-popper__arrow::before) {
  background-color: aliceblue;
}

:deep([data-v-18878494] .el-input__wrapper.is-focus) {
  height: 20px;
}

:deep(.el-popper.is-pure.is-light.el-dropdown__popper) {
  inset: 0 !important;
}
</style>